<template>
  <div class="clinic-manage">
    <div style="display: flex; width: 100%" class="tab-content">
      <div class="sickness-page-content">
        <div class="sickness-page-form">
          <el-input
            style="width: 300px"
            placeholder="请输入内容"
            v-model="groupName"
            @change="onGroupName"
          />
        </div>
        <div>
          <el-tabs
            v-model="activeName_1"
            class="sickness-tabs"
            @tab-click="handleClick_1"
          >
            <el-tab-pane
              v-for="tab in tabValue_1"
              :key="tab.value"
              :label="tab.text"
              :name="tab.value"
            >
            </el-tab-pane>
          </el-tabs>
          <div style="display: flex" >
            <div class="sickness-page">
              <div
                class="draggable-list"
                ref="dragContainerElement"
                v-if="tabFormworkTypeList.length > 0"
              >
                <DragList
                  :todoItems="tabFormworkTypeList"
                  @onTabFormworkType="onTabFormworkType"
                  @onShowContextMenu="showContextMenu"
                />
              </div>
              <div
                v-show="tabFormworkTypeList.length == 0"
                class="tab-placeholder"
                style="margin: 0 auto"
              >
                <el-empty
                  description="暂无数据"
                  :image="emptyImage"
                  :image-size="60"
                />
              </div>
              <!-- 右键菜单 -->
              <div
                v-if="contextMenu.visible"
                class="context-menu"
                :style="{
                  left: contextMenu.x + 'px',
                  top: contextMenu.y + 'px',
                }"
                @click.stop
              >
                <div class="context-menu-item" @click="handleRename">
                  重命名
                </div>
                <div class="context-menu-item" @click="handleDelete">删除</div>
              </div>

              <!-- 全局点击遮罩，用于关闭右键菜单 -->
              <div
                v-if="contextMenu.visible"
                class="context-menu-overlay"
                @click="hideContextMenu"
              ></div>

              <div class="directory" @click="onAddDirectory">+ 新增目录</div>
            </div>
            <div class="sickness-page">
              <!-- <el-empty description="暂无数据" /> -->
              <div
                class="sickness-page-type"
                :class="{
                  'sickness-page-type-active':
                    selectedGroupFormworkId === value.templateId,
                }"
                v-for="value in formworkQueryData"
                :key="value.templateId"
                @click="onSelectedGroupFormworkId(value)"
              >
                <!-- <img
                      src="@/assets/manage/icon_tuodong_nor.svg"
                      alt=""
                      style="vertical-align: middle"
                    /> -->
                <span
                  style="
                    vertical-align: middle;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                  :title="value.templateName"
                >
                  {{ value.templateName }}</span
                >
                <img
                  src="@/assets/manage/icon_shezhi_nor.svg"
                  alt=""
                  style="vertical-align: middle; cursor: pointer"
                  class="kanban-handle"
                  @click="showContextMenuFormwork($event, value)"
                />
              </div>
              <div
                class="directory"
                @click="onFormwork"
                v-if="activeName_1 == '1'"
              >
                + 新增模板
              </div>

              <!-- 右键菜单 -->
              <div
                v-if="addForwork.visible"
                class="context-menu"
                :style="{
                  left: addForwork.x + 'px',
                  top: addForwork.y + 'px',
                }"
                @click.stop
              >
                <div class="context-menu-item" @click="handleMove">移动</div>

                <div
                  class="context-menu-item"
                  @click="handleShare"
                  v-if="activeName_1 == '1'"
                >
                  共享
                </div>
                <div
                  class="context-menu-item"
                  @click="handleCopy"
                  v-if="activeName_1 == '1'"
                >
                  复制
                </div>
                <div
                  class="context-menu-item"
                  @click="handlefetch"
                  v-if="activeName_1 == '2'"
                >
                  获取
                </div>
                <div
                  class="context-menu-item context-menu-item-danger"
                  @click="handleDeleteFormwork"
                  v-if="activeName_1 == '1'"
                >
                  删除
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-content" v-if="activeName == '1' && isFormwork">
        <sickness
          :selectedGroupId="selectedGroupId"
          @refresh="loadTemplateDetail"
          :dataType="dataType"
          :activeName_1="activeName_1"
          @updataTemplate="onAddTemplate"
          :templateMedicalDetail="templateMedicalDetail"
        />
      </div>
      <div class="tab-content" v-else-if="activeName == '2' && isFormwork">
        <lnspection
          :selectedGroupId="selectedGroupId"
          @refresh="loadTemplateDetail"
          :dataType="dataType"
          :activeName_1="activeName_1"
          @updataTemplate="onAddTemplate"
          :templateMedicalDetail="templateMedicalDetail"
        ></lnspection>
      </div>
      <div class="tab-content" v-else-if="activeName == '3' && isFormwork">
        <prescriptionTemplate
          :selectedGroupId="selectedGroupId"
          @refresh="onRefresh"
          :dataType="dataType"
          :activeName_1="activeName_1"
          @updataTemplate="onAddTemplate"
          :templateMedicalDetail="templateMedicalDetail"
        ></prescriptionTemplate>
      </div>
      <div v-else class="tab-placeholder" style="margin: 0 auto">
        <el-empty description="暂无数据" :image="emptyImage" />
      </div>
    </div>
    <div></div>
    <!-- 添加目录 -->
    <Directory ref="directoryRef" @refresh="getTemplateGroup" />
    <!-- 添加模板 -->
    <Formwork ref="formworkRef" @refresh="addGetFormWork" />
    <!-- 编辑目录 -->
    <Rename ref="renameRef" @refresh="getTemplateGroup" />
    <!-- 移动 -->
    <Move ref="moveRef" @refresh="onRefresh" :activeName_1="activeName_1" />
    <!-- 共享 -->
    <Share ref="shareRef" @refresh="getTemplateGroup" />
    <!-- 复制模板 -->
    <Copy ref="copyRef" @refresh="onRefresh" />
    <!--获取模板到个人目录-->
    <Fetch ref="fetchRef"  />
  </div>
</template>
<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus';
import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
import sickness from './sickness.vue';
import lnspection from './lnspection.vue';
import { throttle } from 'lodash';
import prescriptionTemplate from './prescriptionTemplate.vue';
import {
  getTemplateGroupList,
  getTemplateList,
  getTemplateMedicalDetail,
  deleteTemplateGroup,
  deleteTemplateById,
  getTemplateInspectionDetail,
  getTemplatePrescriptionDetail,
  copyTemplate,
} from '@/api/formwork/index';
import stores from '@/store';
import type { TemplateGroup, QueryData } from '@/types/formwork/index';

const formworkRef = ref<InstanceType<any>>();
import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
const medicalFieldStore = stores.useMedicalRecordFieldStore();
const userBase = stores.useBaseDataStore();
interface TabItem {
  text: string;
  value: string;
}
const props = defineProps<{
  activeName_s: string;
}>();

const directoryRef = ref<InstanceType<any>>();
const emits = defineEmits(['updataTemplate']);
// const tabValue : TabItem[] = userBase.getEnumSelect('templateCategoryEnum');
// const tabValue_1: TabItem[] = userBase.getEnumSelect('templateTypeEnum');
// 改为 watch 监听：初始化为空，待枚举加载完成后赋值
const tabValue = ref<any[]>([]);
const tabValue_1 = ref<any[]>([]);
const groupName = ref<string>('');
// 监听模板分类枚举
watch(
  () => userBase.getEnumSelect('templateCategoryEnum'),
  (vals) => {
    if (Array.isArray(vals) && vals.length) {
      tabValue.value = vals;
    }
  },
  { immediate: true, deep: true }
);

// 监听模板类型枚举
watch(
  () => userBase.getEnumSelect('templateTypeEnum'),
  (vals) => {
    if (Array.isArray(vals) && vals.length) {
      tabValue_1.value = vals;
    }
  },
  { immediate: true, deep: true }
);
const dataType = ref<string>('1'); // 1 新增 2 修改

const renameRef = ref<InstanceType<any>>();
const moveRef = ref<InstanceType<any>>();
const shareRef = ref<InstanceType<any>>(); // 共享组件引用
const fetchRef = ref<InstanceType<any>>(); // 拉取模板组件引用
const copyRef = ref<InstanceType<any>>(); // 复制模板组件引用
const activeName = ref('1');
const activeName_1 = ref('1');
const tabFormworkType = ref<TemplateGroup[]>([]); // 原始数据源
watch(
  () => props.activeName_s,
  (val) => {
    activeName.value = val;
  },
  { immediate: true }
);
// 使用 FormKit 拖拽功能 - 直接传入初始数据
const [dragContainerElement, tabFormworkTypeList] = useDragAndDrop(
  tabFormworkType.value,
  {
    dropZoneClass: 'drop-zone', // 可选：拖拽时的样式类
    // dragHandle: 'handle' // 如果需要自定义手柄，可以设置为 true 并在模板中添加 handle
  }
);
// 右键菜单相关状态
const contextMenu = ref({
  visible: false,
  x: 0,
  y: 0,
  currentItem: null as TemplateGroup | null,
});
const addForwork = ref({
  visible: false,
  x: 0,
  y: 0,
  currentItem: null as any,
});
// 显示右键菜单
const showContextMenu = (event: MouseEvent, item: TemplateGroup) => {
  event.preventDefault();
  event.stopPropagation(); // 阻止事件冒泡

  contextMenu.value = {
    visible: true,
    x: event.clientX,
    y: event.clientY,
    currentItem: item,
  };
  //console.log('右键菜单显示:', contextMenu.value);
};
const showContextMenuFormwork = (event: MouseEvent, item: TemplateGroup) => {
  event.preventDefault();
  event.stopPropagation(); // 阻止事件冒泡
  addForwork.value = {
    visible: true,
    x: event.clientX,
    y: event.clientY,
    currentItem: item,
  };
};
// 隐藏右键菜单
const hideContextMenu = (event?: Event) => {
  // 如果点击的是右键菜单内部，不隐藏
  if (event && event.target) {
    const target = event.target as Element;
    if (target.closest('.context-menu')) {
      return;
    }
  }

  contextMenu.value.visible = false;
  addForwork.value.visible = false;
  // contextMenu.value.currentItem = null;
};

// 隐藏模板右键菜单
const hideAddForworkMenu = (event?: Event) => {
  // 如果点击的是右键菜单内部，不隐藏
  if (event && event.target) {
    const target = event.target as Element;
    if (target.closest('.context-menu')) {
      return;
    }
  }

  addForwork.value.visible = false;
  addForwork.value.currentItem = null;
};

// 处理重命名
const handleRename = () => {
  if (contextMenu.value.currentItem) {
    renameRef.value?.open1({
      groupName: contextMenu.value.currentItem.groupName,
      groupId: contextMenu.value.currentItem.groupId,
      templateCategory: activeName.value,
      templateType: activeName_1.value,
    });
  }
  hideContextMenu();
};

// 处理删除
const handleDelete = () => {
  if (contextMenu.value.currentItem) {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        try {
          deleteTemplateGroup({
            groupId: contextMenu.value.currentItem?.groupId,
          }).then((res) => {
            if (res.code != '200') {
              return;
            }
            ElMessage({
              type: 'success',
              message: '删除成功',
            });
            getTemplateGroup();
            hideContextMenu();
          });
        } catch (error: any) {
          //console.log(error, '删除失败');
        }
      })
      .catch(() => {
        // 用户取消，无需处理
      });
  }
};

// 处理模板移动
const handleMove = () => {
  //console.log(addForwork.value.currentItem);

  if (addForwork.value.currentItem) {
    moveRef.value?.open1({
      templateCategory: activeName.value,
      templateType: activeName_1.value,
      templateId: addForwork.value.currentItem?.templateId,
    });
  }
  hideAddForworkMenu();
};

// 处理模板共享
const handleShare = () => {
  if (addForwork.value.currentItem) {
    shareRef.value?.open1({
      groupName: addForwork.value.currentItem.groupName,
      shareGroupId: addForwork.value.currentItem?.shareGroupId,
      templateCategory: activeName.value,
      templateType: '2',
      templateId: addForwork.value.currentItem?.templateId,
      isShare: addForwork.value.currentItem?.isShare || false,
    });
  }
  hideAddForworkMenu();
};

// 处理模板复制
const handleCopy = () => {
  // if (addForwork.value.currentItem) {
  //   copyRef.value?.open1({
  //     groupName: addForwork.value.currentItem.groupName,
  //     groupId: addForwork.value.currentItem.groupId,
  //     templateCategory: activeName.value,
  //     templateType: activeName_1.value,
  //     templateId: addForwork.value.currentItem?.templateId,
  //   });
  // }

  if (!addForwork.value.currentItem?.templateId) {
    ElMessage({
      type: 'warning',
      message: '请选中模板',
    });
    return;
  }
  const data = {
    groupName: addForwork.value.currentItem.groupName,
    groupId: addForwork.value.currentItem.groupId,
    templateCategory: activeName.value,
    templateType: activeName_1.value,
    templateId: addForwork.value.currentItem?.templateId,
  };
  copyTemplate(data)
    .then((res) => {
      if (res.code !== '200') {
        return;
      }
      ElMessage({
        type: 'success',
        message: '复制成功',
      });
      getFormWork();
      hideAddForworkMenu();
    })
    .catch((error) => {
      //console.error('添加失败:', error);
    });
};
const handlefetch = () => {
  if (addForwork.value.currentItem) {
    fetchRef.value?.open1({
      groupName: addForwork.value.currentItem.groupName,
      groupId: addForwork.value.currentItem.groupId,
      templateCategory: activeName.value,
      templateType: '1',
      templateId: addForwork.value.currentItem?.templateId,
    });
  }
  hideAddForworkMenu();
};

// 处理模板删除
const handleDeleteFormwork = () => {
  // if (!selectedGroupFormworkId.value) {
  //   ElMessage({
  //     type: 'warning',
  //     message: '请先选择一个模板',
  //   });
  //   return;
  // }
  //console.log(addForwork.value.currentItem);

  if (addForwork.value.currentItem) {
    // 获取模板名称，需要从templateList中找到对应的模板
    const template = addForwork.value.currentItem.templateList?.[0]; // 或者根据实际情况获取
    const templateName = template?.templateName || '此模板';

    ElMessageBox.confirm('确定要删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        try {
          deleteTemplateById({
            templateId: addForwork.value.currentItem?.templateId,
          }).then((res) => {
            if (res.code != '200') {
              return;
            }
            ElMessage({
              type: 'success',
              message: '删除成功',
            });
            if (
              selectedGroupFormworkId.value ==
              addForwork.value.currentItem?.templateId
            ) {
              selectedGroupFormworkId.value = null;
              isFormwork.value = false;
              templateMedicalDetail.value = {};
            }
            getFormWork();
            hideAddForworkMenu();
          });
        } catch (error: any) {
          //console.log(error, '删除失败');
        }
      })
      .catch(() => {
        // 用户取消，无需处理
      });
  }
};

// 初始化拖拽功能
onMounted(async () => {
  getTemplateGroup();
  // 延迟添加事件监听器，避免立即触发
  setTimeout(() => {
    document.addEventListener('mousedown', hideContextMenu);
  }, 100);
  // 如果数据还没有加载，则加载医疗记录字段数据
  if (!medicalFieldStore.isDataLoaded) {
    try {
      await medicalFieldStore.fetchMedicalRecordFields();
    } catch (error) {
      //console.error('加载医疗记录字段失败:', error);
      //ElMessage.error('加载医疗记录字段失败');
    }
  }
});

// 组件卸载时清理事件监听器
onUnmounted(() => {
  document.removeEventListener('mousedown', hideContextMenu);
});

const selectedGroupId = ref<number | null>(null); // 添加选中状态
const isFormwork = ref<Boolean>(false); // 添加选中状态
const formworkQueryData = ref<any[]>([]); // 数据源
const templateMedicalDetail = ref<any>({}); // 模板详情
const selectedGroupFormworkId = ref<number | null>(null); // 添加选中状态
const handleClick = (tab: TabsPaneContext, event: Event) => {
  //console.log(tab.props.name, event);
  selectedGroupId.value = null; // 重置选中状态
  formworkQueryData.value = []; // 清空之前的数据
  activeName.value = String(tab.props.name); // 更新当前选中的模板类型
  templateMedicalDetail.value = {};
  isFormwork.value = false; // 重置formwork状态
  getTemplateGroup();
};
const handleClick_1 = (tab: TabsPaneContext, event: Event) => {
  selectedGroupId.value = null; // 重置选中状态
  selectedGroupFormworkId.value = null;
  formworkQueryData.value = []; // 清空之前的数据
  activeName_1.value = String(tab.props.name); // 更新当前选中的模板类型
  templateMedicalDetail.value = {};
  isFormwork.value = false; // 重置formwork状态

  throttledGetTemplateGroup();
};
const onAddTemplate = () => {
  //console.log(templateMedicalDetail.value);
  // templateDialog.value = true;
  emits('updataTemplate', templateMedicalDetail.value);
};
const throttledGetTemplateGroup = throttle(() => {
  getTemplateGroup();
}, 800);
const onGroupName = () => {
  selectedGroupId.value = null; // 重置选中状态
  formworkQueryData.value = []; // 清空之前的数据
  isFormwork.value = false; // 重置formwork状态
  throttledGetTemplateGroup();
};

const getTemplateGroup = async () => {
  try {
    const response = await getTemplateGroupList({
      groupName: groupName.value,
      templateType: activeName_1.value,
      templateCategory: activeName.value,
    });
    if (response.code !== '200' || response.data.length == 0) {
      tabFormworkType.value = [];
      tabFormworkTypeList.value = [];
      formworkQueryData.value = [];
      selectedGroupId.value = null; // 重置选中状态
      isFormwork.value = false; // 重置formwork状态
    } else {
      tabFormworkType.value = response.data || [];
      tabFormworkTypeList.value = response.data;
      console.log(response.data);
    }
    //console.log('模板组列表:', response);

    // 数据会通过 watch 自动同步到拖拽列表
  } catch (error) {
    //console.error('获取模板组列表失败:', error);
  }
};
const onAddDirectory = () => {
  if (directoryRef.value) {
    directoryRef.value.open1({
      groupName: '',
      templateCategory: activeName.value,
      templateType: activeName_1.value,
    });
  }
};
const onRefresh = () => {
  // selectedGroupId.value = null; // 重置选中状态
  // formworkQueryData.value = []; // 清空之前的数据
  isFormwork.value = false; // 重置formwork状态
  getFormWork();
};
const addGetFormWork = () => {
  getFormWork('1');
};
const onFormwork = () => {
  if (!selectedGroupId.value) {
    ElMessage({
      message: '请先选择一个目录',
      type: 'warning',
    });
    return;
  }
  // isFormwork.value = true; // 设置为true以显示formwork组件
  formworkRef.value?.open1({
    groupId: selectedGroupId.value,
    templateCategory: activeName.value,
    templateType: activeName_1.value,
  });
  // dataType.value = '1'; // 设置为新增状态
  // templateMedicalDetail.value = {};
};
// 获取模板
const getFormWork = async (type?: string) => {
  if (selectedGroupId.value !== null) {
    const formWorkList = await getTemplateList({
      groupId: selectedGroupId.value,
      templateName: groupName.value,
    });
    if (formWorkList.code == '200') {
      formworkQueryData.value = formWorkList.data || [];
      if (formWorkList.data.length > 0) {
        onSelectedGroupFormworkId(formWorkList.data[0]);
      }
      if (type === '1') {
        selectedGroupFormworkId.value =
          formWorkList.data[formWorkList.data.length - 1]?.templateId;
        isFormwork.value = true;
        dataType.value = '2'; // 设置为修改状态
        await loadTemplateDetail();
      }
    } else {
      formworkQueryData.value = [];
    }
  } else {
    formworkQueryData.value = [];
  }
};
const onTabFormworkType = async (value: TemplateGroup) => {
  console.log(tabFormworkTypeList.value);

  if (tabFormworkTypeList.value.length === 0) {
    return;
  }
  selectedGroupFormworkId.value = null;
  isFormwork.value = false; // 重置formwork状态
  // formworkQueryData.value = value.templateList; // 清空之前的数据
  // 切换选中状态：如果已选中则取消选中，否则选中
  selectedGroupId.value = value.groupId;
  getFormWork();
  // 这里可以添加逻辑处理选中的模板组
};

const onSelectedGroupFormworkId = async (value: any) => {
  console.log(value);

  // 切换选中状态：如果已选中则取消选中，否则选中
  dataType.value = '2'; // 设置为修改状态
  selectedGroupFormworkId.value =
    selectedGroupFormworkId.value === value.templateId
      ? null
      : value.templateId;
  // 根据是否仍然有选中模板控制显示（原逻辑始终设 true，这里做改进：无选中则隐藏）
  isFormwork.value = !!selectedGroupFormworkId.value;
  await loadTemplateDetail();
};

// 封装：根据 activeName 加载对应模板详情
const loadTemplateDetail = async () => {
  const id = selectedGroupFormworkId.value;
  if (id == null) {
    // null 或 undefined 都直接清空
    templateMedicalDetail.value = {};
    return;
  }
  try {
    let fetchFn: any = null;
    switch (activeName.value) {
      case '1':
        fetchFn = getTemplateMedicalDetail;
        break;
      case '2':
        fetchFn = getTemplateInspectionDetail;
        break;
      case '3':
        fetchFn = getTemplatePrescriptionDetail;
        break;
      default:
        fetchFn = null;
    }
    if (!fetchFn) return;
    const result = await fetchFn({ templateId: id });
    templateMedicalDetail.value = result?.data || {};
    // getFormWork();
  } catch (err) {
    //console.error('加载模板详情失败', err);
    templateMedicalDetail.value = {};
  }
};
</script>

<style lang="scss" scoped>
.clinic-manage {
  height: 100%;
}
.tab-content {
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-color-primary);
  font-size: 16px;
  line-height: 1.6;
  width: 100%;
}

.tab-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;

  .el-empty {
    padding: 40px 0;
  }
}
::v-deep(.el-tabs__item) {
  width: 110px; /* 设置每个tab的宽度 */
  padding: 0 !important; /* 去除默认padding */
}
.sickness-page-content {
  width: 288px;
  background: #f8f9fa;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
  .sickness-page-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #e7e7e7;
    .sickness-page-form-right {
      margin-left: auto;
    }
  }
  .sickness-page-table {
    margin-top: 22px;
    height: calc(100% - 58px);
  }
  .sickness-page-pagination {
    margin-top: 24px;
    display: flex;
    align-items: center;
    .sickness-page-pagination-total {
      margin-right: auto;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
.sickness-page {
  height: 750px;
  overflow-y: auto;
  width: 144px;
  border-right: 1px solid #e7e7e7;
}

.draggable-list {
  min-height: 100px;
}

.empty-placeholder,
.loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: #999;
  font-size: 14px;
}

.sickness-page-type {
  display: flex;
  justify-content: space-between;
  line-height: 46px;
  text-align: left;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
  background: #f8f9fa;
  border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid #e7e7e7;
  transition: all 0.3s ease;
  transition: all 0.2s ease;
  user-select: none;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  &:hover {
    background: rgba(22, 173, 164, 0.05);
  }

  &-active {
    width: 143px;
    background: rgba(22, 173, 164, 0.08);
    border-radius: 0px 0px 0px 0px;
    font-weight: 600;
    font-size: 14px;
    color: #16ada4;
  }
}

.directory {
  position: absolute;
  bottom: 0;
  color: #16ada4;
  width: 143px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 0px 0px 0px 0px;
  cursor: pointer;
  border-top: 1px solid #dcdcdc;
}
::v-deep(.el-tabs__header) {
  margin-bottom: 0 !important; /* 去除底部边距 */
}
/* 拖拽时的样式 */
.sortable-ghost {
  opacity: 0.5;
  background: rgba(22, 173, 164, 0.1) !important;
}

.sortable-chosen {
  background: rgba(22, 173, 164, 0.15) !important;
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sortable-drag {
  background: rgba(22, 173, 164, 0.2) !important;
  transform: rotate(5deg);
}

/* 右键菜单样式 */

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 9999;
  min-width: 120px;
  // padding: 4px 0;
}

.context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  transition: all 0.3s;
  &:hover {
    background: rgba(22, 173, 164, 0.05);
  }
}

.context-menu-item i,
.context-menu-icon {
  margin-right: 8px;
  font-size: 14px;
}

.context-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: transparent;
}
::v-deep(.el-tabs__header) {
  margin-bottom: 0 !important; /* 去除底部边距 */
}
</style>
